<template>
  <div class="demo">
      <div v-if="mode === 'edit'" >
        <div class="page-header" :style="{background}">{{text}}</div>
      </div>
      <div v-else>{{ value }}</div>
  </div>
</template>

<script>
export default {
  name: "pheader",
  components: {},
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: '页头',
    },
    background: {
      type: String,
      default: '#f7f7f7'
    },
  },
  data() {
    return {
      // iconName: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // if (this.value) {
    //   this.iconName = this.value;
    //   if (this.mode == "view") {
    //     this.disabled = true;
    //   }
    // }
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
.page-header {
  width: 100%;
  // height: 50px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
}
</style>
